<template>
  <div class="content-frame" v-if="show">
    <div class="nav-frame">
      <div class="page">1   /   1</div>
      <div class="top-operate">
        <el-button type="warning"
                   :icon="Download"
                   size="small"
                   :loading="pdfIsDownLoading"
                   @click="exportHtmlToPdf">下载PDF</el-button>
        <el-button type="primary"
                   :icon="Download"
                   size="small"
                   :loading="wordIsDownLoading"
                   @click="exportHtmlToWord">下载Word</el-button>
      </div>
      <div class="close" @click="close" v-if="showClose">
        <el-icon><Close /></el-icon>
      </div>
    </div>
    <div class="rich-text-frame">
      <div style="height: 20px;width: 100%;opacity: 0;">1</div>
      <template1 @change="showCloseFn"></template1>
      <div style="height: 20px;width: 100%;opacity: 0;">1</div>
    </div>

    <div class="right-operate">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="报告信息" name="1">
          <div class="tabs-content">
            <div>基本信息</div>
            <div class="tab-item">
              <div class="tab-title">文件主题</div>
              <div class="tab-info">A点饮用水检验报告</div>
            </div>
            <div class="tab-item">
              <div class="tab-title">创建时间</div>
              <div class="tab-info">2025-07-07</div>
            </div>
            <div class="OA-frame">
              <div class="OA-title">时间流程详情</div>
              <div class="OA-item">
                <div class="OA-avatar">发</div>
                <div class="OA-item-content">
                  <div class="OA-item-title">
                    <div class="OA-item-text">发起任务</div>
                    <div class="OA-item-date">2025-07-07</div>
                  </div>
                </div>
              </div>
              <div class="OA-item">
                <div class="OA-avatar">签</div>
                <div class="OA-item-content">
                  <div class="OA-item-title">
                    <div class="OA-item-text">签署</div>
                    <div class="OA-item-date">2人无序签</div>
                  </div>
                  <div class="OA-item-card">
                    <div class="OA-item-card-point"></div>
                    <div class="OA-item-card-content">
                      <div class="OA-item-text">签署人</div>
                      <div class="OA-item-date">张三</div>
                      <div class="OA-item-date">未读</div>
                      <div class="link">复制催办链接</div>
                    </div>
                  </div>
                  <div class="OA-item-card">
                    <div class="OA-item-card-point"></div>
                    <div class="OA-item-card-content">
                      <div class="OA-item-text">签署人</div>
                      <div class="OA-item-date">李四</div>
                      <div class="OA-item-date">xxx部门</div>
                      <div class="OA-item-date">已读</div>
                      <div class="OA-item-date">2025-07-07</div>
                      <div class="link">复制催办链接</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="编辑历史" name="2">
          <div class="tabs-content">
            <div>列表</div>
            <div class="edit-list" v-for="(item, index) in 4">
              <div>编辑人：张三</div>
              <div>编辑时间：2025-06-02</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>


  </div>

</template>
<script setup>
// 方法
import { ref, defineExpose } from 'vue'
import methods from '@/utils/methods.js';
import Template1 from '@/views/report/reprotLook/components/template1.vue';
import { Download } from '@element-plus/icons-vue'

// 显示报告
const show = ref(false)
// 右侧菜单标签页
const activeName = ref('1')

const open = () => {
  show.value = true
}
const close = () => {
  show.value = false
}

// 切换标签页
const handleClick = () => {}

const wordIsDownLoading = ref(false)
const exportHtmlToWord = () => {
  wordIsDownLoading.value = true
  const html = document.getElementById('content').innerHTML
  methods.exportHtmlToWord(html)
  setTimeout(() => {
    wordIsDownLoading.value = false
  }, 100)
}

const pdfIsDownLoading = ref(false)
const exportHtmlToPdf = () => {
  pdfIsDownLoading.value = true
  methods.getPdf('检测报告', 'content').then(res => {
    pdfIsDownLoading.value = false
  })
}

const showClose = ref(true)
const showCloseFn = (e) => {
  showClose.value = !e
}

defineExpose({
  open,
  close
})

</script>

<style scoped lang="scss">
  .content-frame {
    padding: 20px;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #f6f6f6;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    .nav-frame {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 50px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 3px -1px gray;
      z-index: 10001;
      .page {
        color: #999;
      }
      .top-operate {
        position: fixed;
        right: 15vw;
        top: 0;
        height: 50px;
        display: flex;
        align-items: center;
        padding-right: 20px;
      }
      .close {
        position: fixed;
        right: calc(15vw + 20px);
        top: 70px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #bbb;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .rich-text-frame {
    width: 70vw;
    height: calc(100vh - 50px);
    overflow-y: auto;
    position: fixed;
    top: 50px;
    left: calc(50% - 35vw);
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .right-operate {
    position: fixed;
    top: 0;
    right: 0;
    width: 15vw;
    height: 100vh;
    z-index: 10002;
    .tabs-content {
      width: 15vw;
      height: calc(100vh - 50px);
      background-color: #fff;
      padding: 20px;
      overflow-y: auto;
      .tab-item {
        margin-top: 20px;
        font-size: 14px;
        .tab-title {
          color: #666;
        }
        .tab-info {
          color: #000;
          margin-top: 5px;
        }
      }
      .OA-frame {
        margin-top: 20px;
        .OA-item {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .OA-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: #bbb;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
          }
          .OA-item-text {}
          .OA-item-date {
            color: #999;
          }
          .OA-item-content {
            width: calc(100% - 34px - 10px);
            line-height: 34px;
            .OA-item-title {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
            }
            .OA-item-card {
              background-color: #fafafa;
              padding: 10px;
              border-radius: 4px;
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              margin-bottom: 10px;
              .OA-item-card-point {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: #4795f2;
                transform: translateY(5px);
              }
              .OA-item-card-content {
                width: calc(100% - 15px);
                line-height: normal;
              }
            }
          }
        }
      }
    }
    .edit-list {
      padding: 10px;
      background-color: #f8f8f8;
      border-radius: 6px;
      margin-top: 10px;
      font-size: 14px;
      div:last-child {
        margin-top: 5px;
      }
    }
  }
</style>
